<script>
// 1. 创建一个 axios 实例。
// 2. 封装 baseURL、timeout。
// 3. 封装 transformResponse。
// 4. 请求拦截器（统一携带 token）。
// 5. 响应拦截器。
//    4.1 成功回调做数据的脱壳 或 统一的错误处理 => 业务错误
//    4.2 失败回调做统一错误处理（HTTP 状态码的错误、无感刷新）
//    4.3 无感刷新：一般 token 出于安全性的考虑，有效期不会设的很长，这样就会导致用户浏览网站的时间过长，退出登录，体验不好。
//    4.4 解决：token 还是设置的有效期很短，当过期的时候还是会 401，在响应拦截器错误的回调根据 refreshToken 调用后端接口拿到新 token，更新到 vuex 和本地，把错误的请求重新发一次。


const JSONbig = require('json-bigint');
axios.create({
  // 开发环境，一般运行的命令是，npm run serve/dev，这个时候就是开发环境，process.env 获取的就是 .env.development 中的变量
  // npm run build，process.env 获取的就是 .env.production 中的变量
  baseURL: process.env.VUE_APP_baseURL,
  timeout,
  // 后端给我们返回的数据都是 JSON 格式的字符串，但是我们用到时候竟然可以当作对象直接使用，为什么呢？
  // 原因就是 axios 内部通过 JSON.parse 进行了转换，所以可以当作对象去使用。

  // 假如后端返回的数据是 '{ "id": 11111111111111111111 }'
  // axios 帮我转换之后的结果 JSON.parse('{ "id": 11111111111111111111 }') => {id: 11111111111111110000}
  // 发现转换之后的 id 和后端返回的不一致
  // 原因：JSON.parse() 搞定不了大数字（超过了 Number.MAX_SAFE_INTEGER 或 Math.pow(2, 53) - 1 的称为大数字）
  transformResponse: [function (data) {
    return JSONbig.parse(data)
    // 默认
    // return JSON.parse(data);
  }]
})
</script>